<template>
    <div :id="'container-' + id" :style="'width: '+ width +';'+ 'height:' + height +';'"></div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue'
import AMapLoader from "@amap/amap-jsapi-loader"
import type { Position } from '@/types/chat'

const map: any = ref(null)

const props = withDefaults(defineProps<{
    currentPosition?: Position
    width?: string
    height?: string
    zoom?: number
    id?: number
}>(), {
    currentPosition: () => {return {lat: '', lng: ''}},
    width: '100%',
    height: '800px',
    zoom: 11,
    id: 1
})

onMounted(() => {
    console.log('------------ 地图 onMounted ------------');
    
    window._AMapSecurityConfig = {
        securityJsCode: "d78e1637c27cb9d7a913960227254b98",
    }

    AMapLoader.load({
        // 申请好的Web端开发者Key，首次调用 load 时必填
        key: "e539649d8af924db8f22bc5b3a282b8e",

        // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        version: "2.0",

        // 需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
        plugins: ["AMap.Scale", "AMap.Geolocation"],
    }).then((AMap) => {

        // 创建地图
        map.value = new AMap.Map("container-" + props.id, {
            // 设置地图容器id
            viewMode: "2D", // 是否为2D地图模式
            zoom: props.zoom, // 初始化地图级别
            center: [116.397428, 39.90923], // 初始化地图中心点位置
        });

        if (props.currentPosition.lat == '') {
            // 定位
            AMap.plugin('AMap.Geolocation', function() {
                var geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true, // 是否使用高精度定位，默认：true
                    timeout: 10000, // 设置定位超时时间，默认：无穷大
                    offset: [10, 20],  // 定位按钮的停靠位置的偏移量
                    zoomToAccuracy: true,  //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                    position: 'RB' //  定位按钮的排放位置,  RB表示右下
                })

                geolocation.getCurrentPosition(function(status: string, result: any){
                    if(status=='complete'){
                        onComplete(result)
                    }else{
                        onError(result)
                    }
                });

                function onComplete (data: any) {
                    // data是具体的定位信息
                    console.log('onComplete data = ', data)
                    props.currentPosition.lat = data.position.lat
                    props.currentPosition.lng = data.position.lng

                    console.log('lng = ', props.currentPosition.lng);
                    console.log('lat = ', props.currentPosition.lat);

                    // 添加 Marker 实例
                    const marker = new AMap.Marker({
                        position: new AMap.LngLat(props.currentPosition.lng, props.currentPosition.lat), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                        // title: "北京",
                        // offset: new AMap.Pixel(-13, -30)
                    });

                    // 将创建的点标记添加到已有的地图实例
                    map.value.add(marker);
                    // 定位到中间进行放大
                    map.value.setFitView([marker])
                    map.value.setZoom(18)
                }

                function onError (data: any) {
                    // 定位出错
                    console.log('onError data = ', data)
                }
            })
        } else {
            // 添加 Marker 实例
            const marker = new AMap.Marker({
                position: new AMap.LngLat(props.currentPosition.lng, props.currentPosition.lat), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                // title: "北京",
                // offset: new AMap.Pixel(-13, -30)
            });

            // 将创建的点标记添加到已有的地图实例
            map.value.add(marker);
            // 定位到中间进行放大
            map.value.setFitView([marker])
            map.value.setZoom(16)
        }
    }).catch((e) => {
        console.log(e);
    })
})

onUnmounted(() => {
    console.log('------------ 地图 onUnmounted ------------');
    map.value?.destroy()
});


</script>

<style scoped lang="scss">
// #container{
//     width: 100%;
//     height: 800px;
// }
</style>